<template>
  <div class="examinfo">
    <van-sticky>
      <van-nav-bar
          title="答卷详情分析"
          left-arrow
          @click-left="onClickLeft"
      />
    </van-sticky>
    <div>
      <van-form>
        <h2 class="title">试卷名称：{{ detail.title }}</h2>
        <div class="pannel">
          <h2>单选题</h2>
          <template v-for="(ele, index) in signal">
            <div class="card">
              <h2 class="card-hd">{{ index +1 }}、{{ele.title}}</h2>
              <van-field>
                <template #input>
                  <van-radio-group v-model="ele.answer" disabled>
                    <van-radio v-for="(e,k) in ele.options" class="item" :name="k">{{k}} {{e}}
                    </van-radio>
                  </van-radio-group>
                </template>
              </van-field>
              <p class="label-info">{{ ele.message}}</p>
            </div>
          </template>
        </div>
        <div class="pannel">
          <h2>多选题</h2>
          <template v-for="(ele, index) in multiple">
            <div class="card">
              <h2 class="card-hd">{{ index +1 }}、{{ele.title}}</h2>
              <van-field>
                <template #input>
                  <van-checkbox-group disabled v-model="ele.answer">
                    <van-checkbox v-for="(e, k) in ele.options" class="item" :name="k">{{k}} {{e}}
                    </van-checkbox>
                  </van-checkbox-group>
                </template>
              </van-field>
              <p class="label-info">{{ ele.message}}</p>
            </div>
          </template>
        </div>
        <div class="pannel">
          <h2>判断题</h2>
          <template v-for="(ele, index) in judgement">
            <div class="card">
              <h2 class="card-hd">{{ index + 1 }}、{{ ele.title }}</h2>
              <van-field>
                <template #input>
                  <van-radio-group disabled v-model="ele.answer">
                    <van-radio class="item" name="A">对</van-radio>
                    <van-radio class="item" name="B">错</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
              <p class="label-info">{{ ele.message}}</p>
            </div>
          </template>
        </div>
        <div class="pannel">
          <h2>简答题</h2>
          <template v-for="(ele, index) in answer">
            <div class="card">
              <h2 class="card-hd">{{ index + 1 }}、{{ ele.title }}</h2>
              <van-field
                  disabled
                  v-model="ele.answer"
                  rows="3"
                  autosize
                  type="textarea"
                  maxlength="1000"
                  placeholder="请输入答案"
                  show-word-limit
              >
              </van-field>
              <p class="label-info">{{ ele.message}}</p>
            </div>
          </template>
        </div>
        <div style="margin: 16px;">
          <van-button round block type="info" @click="onClickLeft" native-type="submit">返回</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,toRefs} from "vue";
import {useRoute, useRouter} from "vue-router";
import {examInfoById} from '../api/page'
const state = reactive({
  pageId: 0,
  detail: {},
  signal: [],
  multiple: [],
  judgement: [],
  answer: [],
})
let {pageId,
  detail,
  signal,
  multiple,
  judgement,
  answer} =  toRefs(state)
const route = useRoute()
const router = useRouter()
pageId.value = route.params.id
const onClickLeft =() =>{
  router.back()
}

const getPageDetail = async (pageId)=>{
  let res = await examInfoById(pageId)
  console.log(res.data.answerDetail)
  signal.value = res.data.answerDetail.single.question
  multiple.value = res.data.answerDetail.multiple.question
  judgement.value = res.data.answerDetail.judgement.question
  answer.value = res.data.answerDetail.answer.question
  console.log(res)
}
getPageDetail(pageId.value)
</script>

<style scoped lang="less">
.examinfo {
  background-color: #fff;
  margin-bottom: 1.5rem;
  padding: 0.2rem;
  .title{
    font-size: 28px;
    line-height: 1.4;
    margin-bottom: 20px;
  }
  .label-info {
    color: #f00;
    padding: 0.2rem 0;
  }
  .pannel {
    > h2 {
      font-size: 20px;
      padding: 0.2rem 0;
      border-bottom: 1px solid #999;
    }
    .card {
      padding: 0.2rem;
    }
    margin-bottom: 0.2rem;
  }
}
</style>
